<template>
  <!-- 主体列表 -->
  <el-table
    :data="paging.slice((pageNum - 1) * PageSize, pageNum * PageSize)"
    border
    class="PageSizepageNum"
  >
    <el-table-column
      type="index"
      :index="indexMethod"
      label="序号"
    ></el-table-column>

    <el-table-column class="el-icon-question details-icon" label="数据源名称">
      <!-- <template slot="header">
        <span style="margin-right: 5px">数据源名称</span>
        <el-tooltip
          class="item"
          effect="dark"
          content="Top Center 提示文字"
          placement="top"
        >
          <span class="el-icon-question details-icon"></span>
        </el-tooltip>
      </template> -->
      <template slot-scope="scope">
        <div :class="scope.row.isClass" @click="isinfo(scope.row)">
          {{ scope.row.dataSourceName }}
        </div>
      </template>
    </el-table-column>

    <el-table-column label="数据源地址">
      <template slot-scope="scope">
        <div :class="scope.row.isClass" @click="isinfo(scope.row)">
          {{ scope.row.dataSourceUrl }}
        </div>
      </template>
    </el-table-column>
    
    <el-table-column label="数据库名称">
      <template slot-scope="scope">
        <div :class="scope.row.isClass" @click="isinfo(scope.row)">
          {{ scope.row.dbName }}
        </div>
      </template>
    </el-table-column>

    <el-table-column prop="dataSourceType" label="数据源类型">
    </el-table-column>

    <el-table-column prop="dataSourceDesc" label="数据源描述">
      <template slot-scope="scope">
        <div :class="scope.row.isClass" @click="isinfo(scope.row)">
          {{ scope.row.dataSourceDesc }}
        </div>
      </template>
    </el-table-column>
    <el-table-column
      prop="updateTime"
      width="170px"
      label="更新时间"
    ></el-table-column>
    <el-table-column label="操作" width="160px">
      <template slot-scope="scope">
        <el-button @click="handleEdit(scope.row)" type="primary" size="small"
          >编辑
        </el-button>

        <el-button @click="open(scope.row.id)" type="danger" size="small"
          >删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
import { DeleteHicky } from "@/assets/js/api";
export default {
  props: {
    name: {
      type: Object,
      default: () => {},
    },
    paging: {
      type: Array,
      default: null,
    },
    totalCount: {
      type: Number,
      default: null,
    },
  },
  data() {
    return {
      // 当前页
      pageNum: 1,
      // 每页条数
      PageSize: 10,
      //弹窗表单
      ruleForm: {
        id: "",
        dataSourceName: "",
        dataSourceUrl: "",
        dbName: "",
        dataSourceUserName: "",
        dataSourceType: "",
        dataSourcePwd: "",
        dataSourceDesc: "",
      },
    };
  },
  methods: {
    // 删除
    open(res) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let ros = { id: res };
          let add = await DeleteHicky(ros);
          if (add.code == 0) {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.$emit("inquire", true);
          } else if (add.code == 1) {
            this.$message.error(add.msg);
          } else if (add.code == -2) {
            this.$message({
              type: "warning",
              message: add.msg,
            });
          } else {
            this.$message.error("删除失败!");
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //  序号翻页连续排序
    indexMethod(index) {
      return (this.name.pageNum - 1) * this.name.pageSize + index + 1;
    },
    // 表格内显示与隐藏
    isinfo(val) {
      if (val.isClass == "isStyle") {
        this.paging.forEach((s) => {
          if (s.id == val.id) {
            s.isClass = "";
          }
        });
      } else {
        this.paging.forEach((s) => {
          if (s.id == val.id) {
            s.isClass = "isStyle";
          }
        });
      }
    },
    // 编辑按钮
    handleEdit(row) {
      this.$emit("isEditTable", true);
      this.$emit("Modify", "编辑");
      this.$emit("isDialog", true);
      this.ruleForm = {
        id: row.id,
        dataSourceName: row.dataSourceName,
        dataSourceUrl: row.dataSourceUrl,
        dbName: row.dbName,
        dataSourceUserName: row.dataSourceUserName,
        dataSourceType: row.dataSourceType,
        dataSourcePwd: row.dataSourcePwd,
        dataSourceDesc: row.dataSourceDesc,
      };
      this.$emit("ruleForm", this.ruleForm);
      this.$emit("ReplaceType", true);
    },
  },
};
</script>

<style scoped>
.isStyle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>